<template>
	  <view class="container">
		<!-- 头部公司信息 -->
		<view class="header">
		  <image class="logo" src="/static/logo.png"></image>
		  <view class="company-info">
			<text class="company-name">{{ all.companyName }}</text>
			<view class="company-tags">{{ all.financingStage }} {{ all.companySize }} {{ all.industryType }}</view>
		  </view>
		  <text class="job-count">{{ collectedPositions.length }} 在招职位</text>

		</view>

		<!-- 公司介绍模块（美化版） -->
		<view class="intro-section">
		  <text class="section-title">公司介绍</text>
		  <view class="intro-card">
			<text class="intro-paragraph">
			  {{ all.companyProfile }}<span class="intro-highlight"></span>
			</text>
		  </view>
		</view>

		<!-- 工作地址模块 -->
		<view class="address-section">
		  <text class="section-title">工作地址</text>
		 <text class="map-address">{{ all.address }}</text>
        <map 
          class="company-map" 
          :latitude="Number(all.latitude)" 
          :longitude="Number(all.longitude)"
          :markers="markers"
          show-location
        ></map>
		</view>

		<!-- 上划呈现职位模块（优化后） -->
		<view class="slide-up-jobs"
		  @touchstart="handleTouchStart"
		  @touchmove="handleTouchMove"
		  @touchend="handleTouchEnd"
		  :style="{
			transform: `translateY(${translateY}px)`,
			transition: isMoving ? 'none' : 'transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)'
		  }"
		>
		  <!-- 露出的标题（仅初始状态显示） -->
		  <text class="slide-up-jobs__title">职位信息</text>
		  <!-- 职位列表容器（初始隐藏，上滑后显示） -->
		  <view class="positions-container">
			<view class="position-card" v-for="position of collectedPositions" :key="position.id">
			  <view class="position-card__header">
				<text class="position-card__title">{{ position.positionName }}</text>
				<text class="position-card__salary">{{ position.salary }}</text>
			  </view>
			  <text class="position-card__company">{{ position.companyName }}</text>
			  <view class="position-card__tags">
				<text class="position-card__tag" v-for="(tag, i) in position.positionTagsList" :key="i">{{ tag }}</text>
			  </view>
			  <view class="position-card__footer">
				<view class="position-card__hr">
				  <image :src="position.hrAvatarUrl" class="position-card__hr-avatar"></image>
				  <text class="position-card__hr-name">{{ position.respPerson }} · {{ position.respPos }}</text>
				</view>
			  </view>
			</view>
		  </view>
		</view>
	  </view>
	</template>

	<script>
	//调用
	import { getjobPostings } from "@/api/attachmentResume";
import { getjobPostingDetailed } from "@/api/job";

	export default {
	  data() {
		return {
		 collectedPositions: [],//职位
		 all:{},//公司信息
		 id:'',//职位id
		 pageSize:10,
		 pageNum:1,
		  // 上滑功能变量
		  startY: 0,
		  moveY: 0,
		  translateY: 0,
		  threshold: 80, // 触发完全展开的阈值（px）
		  viewportHeight: 0,
		  titleHeight: 0, // 标题动态高度
		  isMoving: false ,// 控制过渡效果
		};
	  },
	  onLoad(options){
		this.id=options.id//接收从jobDetail页面传递过来的职位id
		this.initData()//调用initData方法
	  },
	  mounted() {
		// 获取视口高度
		this.viewportHeight = uni.getSystemInfoSync().windowHeight;
		// 动态获取标题高度（避免硬编码）
		this.getTitleHeight();
	  },
	  computed: {
  // 地图标记点
  markers() {
    return [ {
      id: 1,
      latitude: Number(this.all.latitude) || 0,
      longitude: Number(this.all.longitude) || 0,
      title: this.all.companyName
    } ];
  }
},
	  methods: {
		async initData(){
			const res=await getjobPostingDetailed(this.id)
			if(res.code===200){
				this.all=res.data
				const jobRes=await getjobPostings(this.id,this.pageNum,this.pageSize)
				if(jobRes.code === 200){
					this.collectedPositions=jobRes.data.list
				}
			}
		},

		// 动态获取标题高度（确保初始露出部分准确）
		getTitleHeight() {
		  const query = uni.createSelectorQuery().in(this);
		  query.select('.slide-up-jobs__title').boundingClientRect(data => {
			if (data) {
			  this.titleHeight = data.height;
			  // 初始状态：模块底部露出标题（视口高度 - 标题高度）
			  this.translateY = this.viewportHeight - this.titleHeight;
			}
		  }).exec();
		},
		// 触摸开始：记录起始位置，关闭过渡
		handleTouchStart(e) {
		  this.startY = e.touches[0].clientY;
		  this.isMoving = true;
		},
		// 触摸移动：限制上滑范围（最多到模块顶部与视口对齐）
		handleTouchMove(e) {
		  if (!this.isMoving) return;
		  const currentY = e.touches[0].clientY;
		  const diffY = this.startY - currentY; // 上滑为正（diffY越大，上滑越多）
		  
		  // 限制移动范围：最多上滑“视口高度 - 标题高度”（完全展开）
		  this.moveY = Math.min(diffY, this.viewportHeight - this.titleHeight);
		  // 计算当前translateY：初始值（露出标题） - 移动距离（上滑距离）
		  this.translateY = this.viewportHeight - this.titleHeight - this.moveY;
		},
		// 触摸结束：判断是否完全展开，恢复过渡
		handleTouchEnd() {
		  this.isMoving = false;
		  // 阈值判断：超过80px则完全展开，否则回弹
		  if (this.moveY >= this.threshold) {
			this.translateY = 0; // 完全显示（模块顶部与视口对齐）
		  } else {
			this.translateY = this.viewportHeight - this.titleHeight; // 回弹到露出标题
		  }
		  this.moveY = 0;
		}
	  }
	};
	</script>

	<style scoped lang="scss">
	/* 基础容器样式 */
	.container {
	  padding: 30rpx;
	  background-color: #f8f8f8;
	  min-height: 100vh;
	}

	/* 头部样式 */
	.header {
	  display: flex;
	  align-items: center;
	  margin-bottom: 30rpx;
	  padding: 20rpx 0;
	  background-color: #fff;
	  border-radius: 16rpx;
	  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
	}

	.logo {
	  width: 120rpx;
	  height: 120rpx;
	  border-radius: 50%;
	  margin: 0 20rpx;
	}

	.company-info {
	  flex: 1;
	}

	.company-name {
	  font-size: 36rpx;
	  font-weight: bold;
	  color: #222;
	  margin-bottom: 10rpx;
	  display: block;
	}

	.company-tags {
	  font-size: 28rpx;
	  color: #888;
	  line-height: 1.5;
	}

	.job-count {
	  font-size: 28rpx;
	  color: #1890ff;
	  font-weight: 500;
	  margin-right: 20rpx;
	}

	/* _section通用样式 */
	.section-title {
	  font-size: 34rpx;
	  font-weight: 700;
	  color: #222;
	  margin-bottom: 20rpx;
	  padding-bottom: 15rpx;
	  border-bottom: 2rpx solid #f0f0f0;
	  display: block;
	}

	/* 公司介绍模块样式 */
	.intro-section {
	  margin: 30rpx 0;
	}

	.intro-card {
	  background-color: #fff;
	  border-radius: 16rpx;
	  padding: 30rpx;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.02);
	}

	.intro-paragraph {
	  font-size: 28rpx;
	  color: #666;
	  line-height: 1.8;
	  margin-bottom: 25rpx;
	  text-align: justify;
	  text-indent: 2em; /* 添加这行实现首行缩进两个字符 */
	}

	.intro-highlight {
	  font-weight: 600;
	  color: #1890ff;
	}

	.intro-tag {
	  display: inline-block;
	  padding: 6rpx 15rpx;
	  margin: 0 8rpx 8rpx 0;
	  background-color: #f5f5f5;
	  border-radius: 8rpx;
	  font-size: 26rpx;
	  color: #888;
	}

	.intro-key {
	  font-weight: 500;
	  color: #555;
	  text-decoration: underline;
	  text-underline-offset: 4rpx;
	}

	.intro-stats {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 20rpx;
	  margin: 25rpx 0;
	  padding: 20rpx 0;
	  border-top: 2rpx solid #f0f0f0;
	  border-bottom: 2rpx solid #f0f0f0;
	}

	.stat-item {
	  flex: 1 1 calc(25% - 20rpx);
	  text-align: center;
	  padding: 15rpx 0;
	}

	.stat-value {
	  display: block;
	  font-size: 36rpx;
	  font-weight: 700;
	  color: #222;
	  margin-bottom: 8rpx;
	}

	.stat-label {
	  font-size: 24rpx;
	  color: #888;
	}

	.intro-links {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 30rpx;
	  margin-top: 25rpx;
	  padding-top: 20rpx;
	  border-top: 2rpx solid #f0f0f0;
	}

	.link-item {
	  font-size: 28rpx;
	  color: #666;
	}

	.link-text {
	  color: #1890ff;
	  text-decoration: underline;
	  text-underline-offset: 4rpx;
	  cursor: pointer;
	}

	/* 工作地址模块样式 */
	.address-section {
	  margin: 30rpx 0;
	  padding: 30rpx;
	  background-color: #fff;
	  border-radius: 16rpx;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.02);
	}

	.address-content {
	  font-size: 28rpx;
	  color: #666;
	  line-height: 1.8;
	}

	/* 上划职位模块样式（核心优化） */
	.slide-up-jobs {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  height: 100vh;
	  background-color: #fff;
	  border-top-left-radius: 30rpx;
	  border-top-right-radius: 30rpx;
	  box-shadow: 0 -6rpx 18rpx rgba(0, 0, 0, 0.03);
	  overflow-y: auto;
	  z-index: 999;
	}

	/* 标题样式（初始露出部分） */
	.slide-up-jobs__title {
	  font-size: 34rpx;
	  font-weight: 700;
	  color: #222;
	  padding: 25rpx 30rpx;
	  border-bottom: 2rpx solid #f0f0f0;
	  background-color: #fff;
	  position: sticky;
	  top: 0;
	  z-index: 1000;
	  margin: 0;
	}

	/* 职位列表容器样式 */
	.positions-container {
	  padding: 20rpx 30rpx;
	}

	/* 职位卡片样式（优化后） */
	.position-card {
	  background-color: #fff;
	  border-radius: 16rpx;
	  padding: 30rpx;
	  margin: 20rpx 0;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.02);
	  transition: box-shadow 0.3s ease;
	}

	.position-card:hover {
	  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
	}

	.position-card__header {
	  display: flex;
	  justify-content: space-between;
	  align-items: baseline;
	  margin-bottom: 20rpx;
	}

	.position-card__title {
	  font-size: 36rpx;
	  font-weight: 700;
	  color: #222;
	  flex: 1;
	}

	.position-card__salary {
	  font-size: 32rpx;
	  color: #1890ff;
	  font-weight: 600;
	}

	.position-card__company {
	  font-size: 28rpx;
	  color: #888;
	  margin-bottom: 20rpx;
	  display: block;
	}

	.position-card__tags {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 15rpx;
	  margin-bottom: 25rpx;
	}

	.position-card__tag {
	  background-color: #f0f5ff;
	  color: #1890ff;
	  font-size: 26rpx;
	  padding: 8rpx 18rpx;
	  border-radius: 8rpx;
	}

	.position-card__footer {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding-top: 20rpx;
	  border-top: 2rpx solid #f0f0f0;
	}

	.position-card__hr {
	  display: flex;
	  align-items: center;
	}

	.position-card__hr-avatar {
	  width: 80rpx;
	  height: 80rpx;
	  border-radius: 50%;
	  margin-right: 20rpx;
	}

	.position-card__hr-name {
	  font-size: 28rpx;
	  color: #666;
	}

	.company-map {
  width: 100%;
  height: 400rpx; /* 添加高度 */
  border-radius: 16rpx;
  margin-top: 20rpx;
}
	</style>